<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script>
        var count1;

        $(function () {
            //用户id
            var authorId
            //定义方法,判断是否已登录


            var user = JSON.parse(sessionStorage.getItem("user"));



            //获取url上的id值
            var params = getParams();

            if (params.id) {
                //获取游记相关信息
                $.get('/travels/' + params.id, function (data) {
                    authorId = data.author.id
                    $(".travels").renderValues(data, {
                        getPerson: function (item, value) {
                            var html;
                            if (value == 1) {
                                html = '一个人的旅行';
                            } else if (value == 2) {
                                html = '和父母';
                            } else if (value == 3) {
                                html = '和朋友';
                            } else if (value == 4) {
                                html = '和同事';
                            } else if (value == 5) {
                                html = '和爱人';
                            } else if (value == 6) {
                                html = '和其他';
                            }
                            $(item).html(html);
                        },
                        getHref:getHref
                    });
                    //获取粉丝与关注的数量
                    $.get("/users/"+data.author.id,function (list) {
                        $('.follow').html(list.follows)
                        $('.fans').html(list.fans)
                    })
                });

                $.get("/myCollections/selectCollection",{'travelId':params.id},function (data) {
                    $("#collectCount").html(data);
                    count1=data
                })

                if(user){
                    $.ajax({
                        async: false,
                        url: "/myCollections",
                        method:"get",
                        data:{travelId: params.id,
                            userId:user.id
                        },
                        success:function (data) {
                            if (data){
                                $("#collectBtn").css("color","yellow");
                                $("#collectBtn").removeClass("fa-star-o");
                                $("#collectBtn").addClass("fa-star");
                            } else {
                                $("#collectBtn").css("color","rgb(33, 37, 41)");
                            }
                        },
                        getHref: function (item, value) {
                            //item是当前要渲染数据的元素(a),value就是render-key获取的值
                            //获取要跳转的地址
                            var href = $(item).data("href");
                            //把id拼接进去,再设置到a连接的href属性上
                            $(item).attr('href', href + value);
                        }
                    });
                }



                //收藏
                $("#collectBtn").click(function () {

                    if (user){
                        //查询当前用户是否有收藏当前游记

                        if ($("#collectBtn").css("color")=="rgb(33, 37, 41)") {
                            //发送post,添加收藏
                            $.post("/myCollections",{'travel.id':params.id,'user.id':user.id},function (data) {
                                if(data.success){
                                    count1 = count1+1;
                                    $("#collectBtn").css("color","yellow");
                                    $("#collectBtn").removeClass("fa-star-o");
                                    $("#collectBtn").addClass("fa-star");
                                    $("#collectCount").html(count1);
                                    $(document).dialog({
                                        type: 'notice',
                                        infoText: '收藏成功',
                                        autoClose: 300,
                                        position: 'center'  // center: 居中; bottom: 底部
                                    });

                                }else{
                                    $(document).dialog({
                                        type: 'notice',
                                        infoText: '网络繁忙,请稍候',
                                        autoClose: 300,
                                        position: 'center'  // center: 居中; bottom: 底部
                                    });
                                }
                            });
                        } else {
                            //发送delete请求,取消收藏
                            $.ajax({
                                url:"/myCollections?travelId="+params.id+"&userId="+user.id,
                                method:"delete",
                                success:function (data) {
                                    if (data.success){
                                        count1 = count1-1;
                                        $("#collectBtn").css("color","rgb(33, 37, 41)");
                                        $("#collectBtn").removeClass("fa-star");
                                        $("#collectBtn").addClass("fa-star-o");
                                        $("#collectCount").html(count1);
                                        $(document).dialog({
                                            type: 'notice',
                                            infoText: '取消收藏',
                                            autoClose: 300,
                                            position: 'center'  // center: 居中; bottom: 底部
                                        });

                                    } else{
                                        $(document).dialog({
                                            type: 'notice',
                                            infoText: '网络繁忙,请稍候',
                                            autoClose: 300,
                                            position: 'center'  // center: 居中; bottom: 底部
                                        });
                                    }
                                }
                            });
                        }
                    }else{
                        window.location.href = 'login.html?authorId=1';
                    }
                });
            }
            var obj = getParams()//如果有传id过来，就是查看粉丝的关注或者粉丝的粉丝
            if(obj){
                $.post("/myFabulous/"+obj.fabulous,{_method:'PUT'})
            }
            //查询赞数量
           /* $.get("/myFabulousCount",{AuthorId:user.id},function (data) {
                $("#fabulous").html(data)
            })*/
            //查询该用户是否点赞
            if(obj.fabulous){
                console.log(obj.fabulous);
                $.get("/myFabulousCount/"+obj.fabulous,function (data) {
                    if(data.success){
                        $("#likeBtn").attr("class","fa fa-thumbs-up")
                    }
                })
            }
            console.log(user);
            $("#likeBtn").click(function () {
                if(user){
                    $.post("/myFabulous",{'travel.id':obj.id},function (data) {
                        if(data.success){
                            $("#likeBtn").attr("class","fa fa-thumbs-up")
                        }
                    })
                }else {
                    alert('请登录')
                }
            })
        });
    </script>
    <style type="text/css">
        .level{
            color: #ff9d00;
        }
    </style>

</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="createTime"></span>
            浏览 <span> 0</span>
            回复 <span> 0</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <a data-href="/mine/userProfiles.html?id=" render-key="author.id" render-fun="getHref">
                    <img class="rounded-circle" render-src="author.headImgUrl">
                </a>
            </div>
            <div class="col-6 mine">
                <small>
                    <span render-html="author.nickName"></span>
                    <br>
                    关注 <span class="follow level">0 </span>
                    粉丝 <span class="fans level">0 </span>
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name"></span>
            </div>
        </div>
    </div>
    ,
    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends"></span></div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-key="person" render-fun="getPerson"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days"></span>
                </div>
            </div>
        </fieldset>

        <div class="content" render-html="travelContent.content">

        </div>
    </div>
    <hr>
    <div class="container d-flex">
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up" id="likeBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><a data-href="/travelComment.html?travelId=" render-key="id" render-fun="getHref"><i class="fa  fa-commenting-o" id="commentBtn"> </i></a>
        </div>
        <div class="p-2  flex-fill"><i class="fa fa-star-o" id="collectBtn"> </i>
            <span id="collectCount"></span>
        </div>
    </div>
</div>
</body>
</html>